<template>
  <div>
    <div class="block-content">
      <el-button type="primary" @click="showAdd">新增</el-button>
      <el-dialog
        title="新增学校"
        :visible.sync="formVisible"
        :append-to-body="true">
        <el-form
          label-width="120px">
          <el-form-item label="学校名称">
            <el-input 
              v-model="schoolName"
              placeholder="例如: 铁城小学" />
          </el-form-item>
          <el-form-item label="省份城市">
            <el-select
              placeholder="省份"
              style="width: 140px;"
              v-model="province"
              @change="chooseProvince">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in provinceList"
                :key="index"
                :value="item.value"
                :label="item.name" />
            </el-select>
            --
            <el-select
              placeholder="城市"
              style="width: 140px"
              v-model="city"
              @change="chooseCity">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in cityList"
                :key="index"
                :value="item.value"
                :label="item.name" />
            </el-select>
            --
            <el-select
              placeholder="地区"
              style="width: 140px"
              v-model="area"
              @change="chooseArea">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in areaList"
                :key="index"
                :value="item.value"
                :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="学校地址">
            <el-input 
              v-model="address" 
              placeholder="例如: 广东省中山市西区雅居乐·剑桥郡小区" />
          </el-form-item>
          <el-form-item label="教育程度">
            <el-select v-model="educationType">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in educationList"
                :key="index"
                :label="item.educationName"
                :value="item.educationType"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add">提交</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="block-content">
      <paging-table
        :data="data"
        :total="count">
        <el-table-column 
          label="学校名称"
          prop="schoolName"
          width="200px" />
        <el-table-column
          label="省份" 
          prop="province"
          width="100px" />
        <el-table-column
          label="城市" 
          prop="city"
          width="100px" />
        <el-table-column
          label="地区" 
          prop="area"
          width="100px" />
        <el-table-column 
          label="详细地址"
          prop="address"
          width="" />
      </paging-table>
    </div>
  </div>
</template>

<script>
import PagingTable from '@/components/PagingTable'
import China from 'china-division/dist/pca.json'
import { mapGetters } from 'vuex' 

export default {
  data () {
    return {
      data: [],
      count: 0,
      provinceList: [],
      schoolName: '',
      province: '',
      city: '',
      area: '',
      address: '',
      educationType: '',
      formVisible: false
    }
  },
  methods: {
    async getSchoolList (page) {
      const res = await this.$http.get('/school', {
        page,
        pageSize: 10
      })
      const { data, count } = res
      this.data = data.slice(0)
      this.count = count
    },
    init () {
      this.provinceList = []
      for (let i in China) {
        this.provinceList.push({
          name: i,
          value: i
        })
      }
      this.getSchoolList()
    },
    showAdd () {
      this.reset()
      this.formVisible = true
    },
    async add () {
      if (!this.schoolName) {
        this.$alert('请输入学校名')
        return
      }
      if (!this.province) {
        this.$alert('请选择省份')
        return
      }
      if (!this.city) {
        this.$alert('请选择城市')
        return
      }
      if (!this.area) {
        this.$alert('请选择地区')
        return
      }
      if (!this.address) {
        this.$alert('请输入学校地址')
        return
      }
      if (!this.educationType) {
        this.$alert('请选择教育程度')
        return
      }
      console.log(this.province, this.city, this.area, this.schoolName, this.address, this.educationType)
      const res = await this.$http.post('/school', {
        province: this.province,
        city: this.city,
        area: this.area,
        schoolName: this.schoolName,
        address: this.address,
        educationType: this.educationType
      })
      const { code } = res
      if (code === 200) {
        console.log('创建成功')
        this.getSchoolList(1)
        this.formVisible = false
      } else {
        console.log('创建成功')
      }
    },
    reset () {
      this.province = ''
      this.city = ''
      this.area = ''
      this.schoolName = ''
      this.address = ''
      this.educationType = ''
    },
    chooseProvince () {
      this.city = ''
      this.area = ''
    },
    chooseCity () {
      this.area = ''
    },
    chooseArea () {

    }
  },
  computed: {
    ...mapGetters({
      educationList: 'educationList'
    }),
    cityList () {
      const cityList = []
      if (this.province) {
        const target = China[this.province] || {}
        for (let i in target) {
          cityList.push({
            name: i,
            value: i
          })
        }
      }
      return cityList
    },
    areaList () {
      let areaList = []
      if (this.city) {
        const list = China[this.province][this.city]
        areaList = list.map(item => {
          return {
            name: item,
            value: item
          }
        })
      }
      return areaList
    }
  },
  created () {
    this.init()
  },
  components: {
    PagingTable
  }  
}
</script>
<style lang="scss" scoped>

</style>
